<template>
  <div
    class="relative flex flex-col w-full"
    :class="[
      'mt-' + (infoComponent.extension.topMargin && infoComponent.extension.topMargin.value),
      'mr-' + (infoComponent.extension.rightMargin && infoComponent.extension.rightMargin.value),
      'mb-' + (infoComponent.extension.bottomMargin && infoComponent.extension.bottomMargin.value),
      'ml-' + (infoComponent.extension.leftMargin && infoComponent.extension.leftMargin.value),
    ]"
  >
    <div
      class="h-full"
      :style="{
        '--color': infoComponent.extension.color.value,
        '--width': `${infoComponent.extension.width.value}px`,
        '--height': `${infoComponent.extension.height.value}px`,
        '--font-size': `${infoComponent.extension.fontSize.value}px`,
        display: 'flex',
        justifyContent: infoComponent.extension.posi.value,
      }"
    >
      <div class="box">
        <div class="wrap" :style="wrapStyle">
          <div class="wrapcontent">{{ wrapcontent }}</div>
        </div>
        <!-- <div
          class="guidao"
          :style="{
            width: `${infoComponent.extension.width.value}px`,
            height: `${infoComponent.extension.height.value}px`,
            background: infoComponent.extension.color.value,
            position: 'absolute',
            top: 0,
            left: clickIndex * (infoComponent.extension.width.value + 4) + 'px',
            transition: 'left 0.5s',
          }"
        ></div> -->
        <div
          v-for="(item, index) in getCurrentPageArr"
          :key="index"
          class="yema"
          :style="{
            background: item == wrapcontent ? infoComponent.extension.color.value : '',
            color: item == wrapcontent ? '#fff' : infoComponent.extension.color.value,
          }"
          @click="clickRow(item, index)"
          @mouseleave="mouseLeave"
          @mouseover="mounseOver(index)"
        >
          {{ item }}
          <div
            v-if="index == overIndex"
            class="svg"
            :style="{
              width: `${infoComponent.extension.width.value}px`,
              height: `${(infoComponent.extension.height.value * 4) / 3}px`,
            }"
          >
            <svg
              :style="{
                width: `${infoComponent.extension.width.value}px`,
                height: `${(infoComponent.extension.height.value * 4) / 3}px`,
              }"
            >
              <polygon class="tick" :points="getPoints" :style="`stroke: ${infoComponent.extension.gColor.value}; stroke-width: 2; fill: none`" />
            </svg>
          </div>
        </div>
        <div class="yema total" style="width: auto; padding: 0 10px">
          <span v-if="!isEdit" ref="page" @dblclick="editPage">{{ pageInnerText }} / {{ getTotalPage }}</span>
          <input
            v-if="isEdit"
            style="display: block; width: 100px; height: 100%; outline: none; border: 0; background: rgba(0, 0, 0, 0)"
            type="text"
            :value="pageInnerText"
            @blur="onBlurInput"
          />
          <div
            ref="dhua"
            :style="{
              color: infoComponent.extension.bColor.value,
            }"
          ></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import { defineComponent } from 'vue'
  import { UiMixin, RefsInjectMixin, ChartMixin } from '@ve/mixin'
  import cloneDeep from 'lodash/cloneDeep'
  export default defineComponent({
    name: 'UiPage',
    mixins: [UiMixin, RefsInjectMixin, ChartMixin],
    inject: {
      hasPreview: { default: false },
    },
    props: {
      info: {
        required: true,
        type: Object,
        default: function () {
          return {}
        },
      },
    },
    data() {
      return {
        infoComponent: {},
        state: false,
        overIndex: -1,
        wrapStyle: {
          opacity: 0,
        },
        pageInnerText: 1,
        wrapcontent: '1',
        currentPage: 1,
        clickIndex: 0,
        getChangePageIndex: 0,
        isEdit: false,
      }
    },
    computed: {
      getTotalPage() {
        let page = 1
        if (this.infoComponent.extension.defaultValue.value % this.infoComponent.extension.pageNum.value) {
          let a = this.infoComponent.extension.defaultValue.value / this.infoComponent.extension.pageNum.value + 1
          page = a.toFixed(0)
        } else {
          let a = this.infoComponent.extension.defaultValue.value / this.infoComponent.extension.pageNum.value
          page = a.toFixed(0)
        }
        return Number(page)
      },
      getCurrentPageArr() {
        let num = []
        let arr = [...Array(this.getTotalPage + 1).keys()].slice(1)
        if (this.getTotalPage < 5) {
          num = arr
        } else {
          if (this.getChangePageIndex < 4) {
            num = arr.slice(0, 5)
          } else if (this.getChangePageIndex < this.getTotalPage - 3) {
            num = arr.slice(this.getChangePageIndex - 3, this.getChangePageIndex + 2)
          } else if (this.getChangePageIndex > this.getTotalPage - 4) {
            num = arr.slice(arr.length - 5, arr.length)
          }
        }
        return num
      },
      getPoints() {
        let width = this.infoComponent.extension.width.value
        let height = this.infoComponent.extension.height.value
        return `0,${height / 3} ${width / 2 - 4},${height / 3} ${width / 2 - 2},2 ${width / 2 + 2},2 ${width / 2},${height / 3} ${width},${
          height / 3
        } ${width},${height / 3 + height} 0,${height / 3 + height}`
      },
    },
    watch: {
      info: {
        handler(val) {
          this.infoComponent = cloneDeep(val)
        },
        deep: true,
      },
    },
    created() {
      this.infoComponent = cloneDeep(this.info)
    },
    mounted() {
      // let oSvg = document.createElement("div");
      // oSvg.className = "svg";
      // oSvg.innerHTML = `
      //   `;
    },
    methods: {
      mounseOver(index) {
        if (!this.state) {
          this.overIndex = index
          this.state = true
          this.$refs.dhua.className = ''
        }
      },
      mouseLeave() {
        this.state = false
        this.overIndex = -1
      },
      setPageArr(item, index, type) {
        if (type) {
          if (item > 0 && item <= this.getTotalPage) {
            this.wrapcontent = item
            this.pageInnerText = item
            this.getChangePageIndex = item
          }
          this.isEdit = false
          return
        }
        if (index > 3) {
          if (this.getTotalPage < 5) {
            return
          }
          if (item > this.getTotalPage - 2) {
            return
          }
          this.getChangePageIndex = item
        }
        if (index < 1) {
          if (this.getChangePageIndex == 1) {
            return
          }
          this.getChangePageIndex = item
        }
      },
      clickRow(item, index) {
        if (this.wrapcontent == item) {
          return
        }
        this.wrapcontent = item
        this.clickIndex = index
        let xs = (this.getCurrentPageArr.length - index) * (this.infoComponent.extension.width.value + 4) + this.$refs.page.offsetWidth / 2
        this.wrapStyle = {
          opacity: 1,
          width: xs + 'px',
          height: xs + 'px',
          left: index * (this.infoComponent.extension.width.value + 4) + this.infoComponent.extension.width.value / 2 + 'px',
          top: '-' + xs * 0.5 + 'px',
          animation: 'wrap-round .5s linear 1',
        }
        setTimeout(() => {
          this.pageInnerText = item
          this.wrapStyle.opacity = '0'
          this.$refs.dhua.className = 'dh'
          this.wrapStyle.animation = ''
          this.setPageArr(item, index)
          this.overIndex = -1
        }, 500)
      },
      editPage() {
        this.isEdit = true
      },
      onBlurInput(e) {
        this.setPageArr(Number(e.target.value), 0, true)
      },
    },
  })
</script>
<style lang="scss">
  .uiPage {
    width: 100%;
    .box {
      display: flex;
      justify-content: center;
      position: relative;
    }
    .tick {
      stroke-dasharray: 350;
      stroke-dashoffset: 350;
      animation: tick 4s ease-out;
      animation-delay: 0.2s;
    }
    .yema {
      width: var(--width);
      height: var(--height);
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 1px solid var(--color);
      z-index: 1;
      color: var(--color);
      margin-right: 4px;
      cursor: pointer;
      font-size: var(--font-size);
      transition: transform 0.5s, margin 0.5s;
      user-select: none;
    }
    .yema:active {
      transform: scale(1.05);
    }
    .total.yema:active {
      transform: scale(1);
    }
    .svg {
      position: absolute;
      top: -10px;
      left: 0;
      z-index: 0;
      overflow: hidden;
    }
    @keyframes tick {
      from {
        stroke-dashoffset: 350;
      }
      to {
        stroke-dashoffset: 0;
      }
    }
    svg {
      width: var(--width);
      height: var(--height);
    }
    @keyframes wrap-round {
      0% {
        transform: scale(1) rotate(0turn);
      }
      100% {
        transform: scale(1) rotate(0.5turn);
      }
    }
    .wrap {
      position: absolute;
      height: 150px;
      width: 150px;
      transform: scale(1);
      border-radius: 50%;
      // left: 0;
      // right: 0;
      top: -75px;
    }
    .wrapcontent {
      position: absolute;
      left: 0;
      top: 50%;
      color: #fff;
    }
    .total {
      position: relative;
    }
    .dh {
      position: absolute;
      top: -12px;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #cfc;
      transform: rotateX(110deg);
      opacity: 0;
      animation: bowen 0.8s;
    }
    @keyframes bowen {
      from {
        opacity: 1;
        transform: rotateX(110deg) scale(1);
      }
      to {
        opacity: 0;
        transform: rotateX(110deg) scale(3);
      }
    }
  }
</style>
